フロントエンドアーキテクチャ：スケーラブルなアプリケーションのためのヘキサゴナルアーキテクチャとクリーンアーキテクチャ

フロントエンドアプリケーションが複雑化するにつれて、保守性、テスト性、拡張性のためには、明確に定義されたアーキテクチャが不可欠になります。これらの懸念に対処する2つの人気のあるアーキテクチャパターンが、ヘキサゴナルアーキテクチャ（ポート＆アダプターとしても知られる）とクリーンアーキテクチャです。これらはもともとバックエンドの世界で生まれましたが、その原則はフロントエンド開発にも効果的に適用でき、堅牢で適応性の高いユーザーインターフェースを作成できます。

フロントエンドアーキテクチャとは？

フロントエンドアーキテクチャは、フロントエンドアプリケーション内のさまざまなコンポーネントの構造、組織、および相互作用を定義します。これは、アプリケーションがどのように構築され、保守され、拡張されるかの青写真を提供します。優れたフロントエンドアーキテクチャは、以下を促進します：

• 保守性： コードの理解、修正、デバッグが容易になります。
• テスト性： ユニットテストや結合テストの作成を容易にします。
• 拡張性： アプリケーションが増大する複雑さやユーザー負荷に対応できるようになります。
• 再利用性： アプリケーションのさまざまな部分でコードの再利用を促進します。
• 柔軟性： 変化する要件や新しいテクノロジーに適応します。

明確なアーキテクチャがないと、フロントエンドプロジェクトはすぐにモノリシックで管理が困難になり、開発コストの増加と俊敏性の低下につながる可能性があります。

ヘキサゴナルアーキテクチャ入門

Alistair Cockburnによって提唱されたヘキサゴナルアーキテクチャは、アプリケーションのコアビジネスロジックを、データベース、UIフレームワーク、サードパーティAPIなどの外部依存から切り離すことを目的としています。これはポート＆アダプターという概念を通じて実現されます。

ヘキサゴナルアーキテクチャの主要概念：

• コア（ドメイン）： アプリケーションのビジネスロジックとユースケースを含みます。外部のフレームワークやテクノロジーから独立しています。
• ポート： コアが外部の世界とどのように相互作用するかを定義するインターフェースです。コアの入力と出力の境界を表します。
• アダプター： コアを特定の外部システムに接続するポートの実装です。アダプターには2つのタイプがあります：
• ドライビングアダプター（プライマリアダプター）： コアとの相互作用を開始します。例として、UIコンポーネント、コマンドラインインターフェース、または他のアプリケーションが挙げられます。
• ドリブンアダプター（セカンダリアダプター）： コアによって呼び出され、外部システムと相互作用します。例として、データベース、API、またはファイルシステムが挙げられます。

コアは特定のアダプターについて何も知りません。ポートを介してのみそれらと相互作用します。この分離により、コアロジックに影響を与えることなく、さまざまなアダプターを簡単に交換できます。例えば、ドライビングアダプターを置き換えるだけで、あるUIフレームワーク（例：React）から別のもの（例：Vue.js）に切り替えることができます。

ヘキサゴナルアーキテクチャの利点：

• テスト性の向上： コアビジネスロジックは、外部の依存関係に頼ることなく、独立して簡単にテストできます。モックアダプターを使用して外部システムの動作をシミュレートできます。
• 保守性の向上： 外部システムの変更がコアロジックに与える影響は最小限です。これにより、アプリケーションの長期的な保守と進化が容易になります。
• 柔軟性の向上： アダプターを追加または交換することで、アプリケーションを新しいテクノロジーや要件に簡単に適応させることができます。
• 再利用性の強化： コアビジネスロジックは、異なるアダプターに接続することで、さまざまなコンテキストで再利用できます。

クリーンアーキテクチャ入門

Robert C. Martin（アンクル・ボブ）によって広められたクリーンアーキテクチャは、関心の分離と疎結合を重視するもう一つのアーキテクチャパターンです。これは、フレームワーク、データベース、UI、およびあらゆる外部機関から独立したシステムを作成することに焦点を当てています。

クリーンアーキテクチャの主要概念：

クリーンアーキテクチャは、アプリケーションを同心円状のレイヤーに整理します。中心には最も抽象的で再利用可能なコードを、外側のレイヤーには最も具体的でテクノロジーに依存したコードを配置します。

• エンティティ： アプリケーションの中核となるビジネスオブジェクトとルールを表します。これらはどの外部システムからも独立しています。
• ユースケース： アプリケーションのビジネスロジックと、ユーザーがシステムとどのように対話するかを定義します。特定のタスクを実行するためにエンティティを編成します。
• インターフェースアダプター： ユースケースと外部システムとの間でデータを変換します。このレイヤーには、プレゼンター、コントローラー、ゲートウェイが含まれます。
• フレームワークとドライバー： UIフレームワーク、データベース、その他の外部テクノロジーを含む最外層のレイヤーです。

クリーンアーキテクチャの依存性のルールは、外側のレイヤーは内側のレイヤーに依存できるが、内側のレイヤーは外側のレイヤーに依存できない、と定めています。これにより、コアビジネスロジックが外部のフレームワークやテクノロジーから独立していることが保証されます。

クリーンアーキテクチャの利点：

• フレームワークからの独立： このアーキテクチャは、機能豊富なソフトウェアライブラリの存在に依存しません。これにより、システムをフレームワークの限定された制約に押し込むのではなく、フレームワークをツールとして使用できます。
• テスト可能： ビジネスルールは、UI、データベース、Webサーバー、その他の外部要素なしでテストできます。
• UIからの独立： システムの他の部分を変更することなく、UIを簡単に変更できます。Web UIは、ビジネスルールを変更することなく、コンソールUIに置き換えることができます。
• データベースからの独立： OracleやSQL Serverを、Mongo、BigTable、CouchDBなどに交換できます。ビジネスルールはデータベースに縛られません。
• あらゆる外部機関からの独立： 実際、ビジネスルールは外部の世界について*何も*知りません。

フロントエンド開発へのヘキサゴナルおよびクリーンアーキテクチャの適用

ヘキサゴナルアーキテクチャとクリーンアーキテクチャはバックエンド開発に関連付けられることが多いですが、その原則はフロントエンドアプリケーションのアーキテクチャと保守性を向上させるために効果的に適用できます。その方法は次のとおりです：

1. コア（ドメイン）を特定する

最初のステップは、フロントエンドアプリケーションのコアビジネスロジックを特定することです。これには、UIフレームワークや外部APIから独立したエンティティ、ユースケース、ビジネスルールが含まれます。例えば、eコマースアプリケーションでは、コアには商品、ショッピングカート、注文を管理するロジックが含まれるかもしれません。

例： タスク管理アプリケーションでは、コアドメインは以下で構成されます：

• エンティティ： タスク、プロジェクト、ユーザー
• ユースケース： CreateTask, UpdateTask, AssignTask, CompleteTask, ListTasks
• ビジネスルール： タスクにはタイトルが必要、プロジェクトのメンバーではないユーザーにタスクを割り当てることはできない。

2. ポートとアダプター（ヘキサゴナルアーキテクチャ）またはレイヤー（クリーンアーキテクチャ）を定義する

次に、コアを外部システムから分離するポートとアダプター（ヘキサゴナルアーキテクチャ）またはレイヤー（クリーンアーキテクチャ）を定義します。フロントエンドアプリケーションでは、これらには以下が含まれる場合があります：

• UIコンポーネント（ドライビングアダプター/フレームワーク＆ドライバー）： ユーザーと対話するReact、Vue.js、Angularコンポーネント。
• APIクライアント（ドリブンアダプター/インターフェースアダプター）： バックエンドAPIにリクエストを行うサービス。
• データストア（ドリブンアダプター/インターフェースアダプター）： ローカルストレージ、IndexedDB、またはその他のデータストレージメカニズム。
• 状態管理（インターフェースアダプター）： Redux、Vuex、またはその他の状態管理ライブラリ。

ヘキサゴナルアーキテクチャを使用した例：

• コア： タスク管理ロジック（エンティティ、ユースケース、ビジネスルール）。
• ポート： TaskService（タスクの作成、更新、取得のためのメソッドを定義）。
• ドライビングアダプター： TaskServiceを使用してコアと対話するReactコンポーネント。
• ドリブンアダプター： TaskServiceを実装し、バックエンドAPIにリクエストを行うAPIクライアント。

クリーンアーキテクチャを使用した例：

• エンティティ： Task, Project, User（純粋なJavaScriptオブジェクト）。
• ユースケース： CreateTaskUseCase, UpdateTaskUseCase（エンティティを編成）。
• インターフェースアダプター：
  • コントローラー：UIからのユーザー入力を処理。
  • プレゼンター：UIで表示するためにデータをフォーマット。
  • ゲートウェイ：APIクライアントと対話。
• フレームワークとドライバー： Reactコンポーネント、APIクライアント（axios, fetch）。

3. アダプター（ヘキサゴナルアーキテクチャ）またはレイヤー（クリーンアーキテクチャ）を実装する

次に、コアを外部システムに接続するアダプターまたはレイヤーを実装します。アダプターまたはレイヤーがコアから独立しており、コアがポートまたはインターフェースを介してのみそれらと対話することを確認してください。これにより、コアロジックに影響を与えることなく、異なるアダプターまたはレイヤーを簡単に交換できます。

例（ヘキサゴナルアーキテクチャ）：

// TaskService ポート
interface TaskService {
  createTask(taskData: TaskData): Promise;
  updateTask(taskId: string, taskData: TaskData): Promise;
  getTask(taskId: string): Promise;
}

// APIクライアントアダプター
class ApiTaskService implements TaskService {
  async createTask(taskData: TaskData): Promise {
    // タスクを作成するためのAPIリクエストを行う
  }

  async updateTask(taskId: string, taskData: TaskData): Promise {
    // タスクを更新するためのAPIリクエストを行う
  }

  async getTask(taskId: string): Promise {
    // タスクを取得するためのAPIリクエストを行う
  }
}

// Reactコンポーネントアダプター
function TaskList() {
  const taskService: TaskService = new ApiTaskService();

  const handleCreateTask = async (taskData: TaskData) => {
    await taskService.createTask(taskData);
    // タスクリストを更新
  };

  // ...
}

例（クリーンアーキテクチャ）：

// エンティティ
class Task {
  constructor(public id: string, public title: string, public description: string) {}
}

// ユースケース
class CreateTaskUseCase {
  constructor(private taskGateway: TaskGateway) {}

  async execute(title: string, description: string): Promise {
    const task = new Task(generateId(), title, description);
    await this.taskGateway.create(task);
    return task;
  }
}

// インターフェースアダプター - ゲートウェイ
interface TaskGateway {
  create(task: Task): Promise;
}

class ApiTaskGateway implements TaskGateway {
  async create(task: Task): Promise {
    // タスク作成のためのAPIリクエストを行う
  }
}

// インターフェースアダプター - コントローラー
class TaskController {
  constructor(private createTaskUseCase: CreateTaskUseCase) {}

  async createTask(req: Request, res: Response) {
    const { title, description } = req.body;
    const task = await this.createTaskUseCase.execute(title, description);
    res.json(task);
  }
}

// フレームワーク＆ドライバー - Reactコンポーネント
function TaskForm() {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const apiTaskGateway = new ApiTaskGateway();
  const createTaskUseCase = new CreateTaskUseCase(apiTaskGateway);
  const taskController = new TaskController(createTaskUseCase);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await taskController.createTask({ body: { title, description } } as Request, { json: (data: any) => console.log(data) } as Response);
  };

  return (
    

       setTitle(e.target.value)} />
       setDescription(e.target.value)} />
      <button type="submit">Create Task</button>
    </form>
  );
}

</code>
</pre>

<h3>4. 依存性の注入を実装する</h3>

<p>コアを外部システムからさらに分離するために、依存性の注入を使用してアダプターまたはレイヤーをコアに提供します。これにより、コアコードを変更することなく、アダプターまたはレイヤーの異なる実装を簡単に交換できます。</p>

<p><b>例：</b></p>

<pre>
<code>
// TaskServiceをTaskListコンポーネントに注入する
function TaskList(props: { taskService: TaskService }) {
  const { taskService } = props;

  const handleCreateTask = async (taskData: TaskData) => {
    await taskService.createTask(taskData);
    // タスクリストを更新
  };

  // ...
}

// 使用法
const apiTaskService = new ApiTaskService();
<TaskList taskService={apiTaskService} />
</code>
</pre>

<h3>5. ユニットテストを作成する</h3>

<p>ヘキサゴナルアーキテクチャとクリーンアーキテクチャの主要な利点の1つは、テスト性の向上です。外部の依存関係に頼ることなく、コアビジネスロジックのユニットテストを簡単に作成できます。モックアダプターまたはレイヤーを使用して外部システムの動作をシミュレートし、コアロジックが期待どおりに機能していることを確認します。</p>

<p><b>例：</b></p>

<pre>
<code>
// モックTaskService
class MockTaskService implements TaskService {
  async createTask(taskData: TaskData): Promise<Task> {
    return Promise.resolve({ id: '1', ...taskData });
  }

  async updateTask(taskId: string, taskData: TaskData): Promise<Task> {
    return Promise.resolve({ id: taskId, ...taskData });
  }

  async getTask(taskId: string): Promise<Task> {
    return Promise.resolve({ id: taskId, title: 'Test Task', description: 'Test Description' });
  }
}

// ユニットテスト
describe('TaskList', () => {
  it('should create a task', async () => {
    const mockTaskService = new MockTaskService();
    const taskList = new TaskList({ taskService: mockTaskService });

    const taskData = { title: 'New Task', description: 'New Description' };
    const newTask = await taskList.handleCreateTask(taskData);

    expect(newTask.title).toBe('New Task');
    expect(newTask.description).toBe('New Description');
  });
});
</code>
</pre>

<h2>実践的な考慮事項と課題</h2>

<p>ヘキサゴナルアーキテクチャとクリーンアーキテクチャは大きな利点を提供しますが、フロントエンド開発に適用する際には、いくつかの実践的な考慮事項と課題も心に留めておく必要があります：</p>

<ul>
 <li><b>複雑性の増加：</b> これらのアーキテクチャは、特に小規模または単純なアプリケーションの場合、コードベースに複雑さを加える可能性があります。</li>
 <li><b>学習曲線：</b> 開発者は、これらのアーキテクチャを効果的に実装するために、新しい概念やパターンを学ぶ必要があるかもしれません。</li>
 <li><b>過剰設計：</b> アプリケーションの過剰設計を避けることが重要です。単純なアーキテクチャから始め、必要に応じて徐々に複雑さを加えてください。</li>
 <li><b>抽象化のバランス：</b> 適切なレベルの抽象化を見つけることは難しい場合があります。抽象化が多すぎるとコードが理解しにくくなり、少なすぎると密結合につながる可能性があります。</li>
 <li><b>パフォーマンスに関する考慮事項：</b> 過度の抽象化レイヤーは、パフォーマンスに影響を与える可能性があります。アプリケーションのプロファイリングを行い、パフォーマンスのボトルネックを特定することが重要です。</li>
</ul>

<h2>国際的な事例と適応</h2>

<p>ヘキサゴナルアーキテクチャとクリーンアーキテクチャの原則は、地理的な場所や文化的背景に関係なく、フロントエンド開発に適用可能です。ただし、具体的な実装や適応は、プロジェクトの要件や開発チームの好みに応じて異なる場合があります。</p>

<p><b>例1：グローバルなeコマースプラットフォーム</b></p>

<p>グローバルなeコマースプラットフォームでは、ヘキサゴナルアーキテクチャを使用して、コアとなるショッピングカートと注文管理ロジックをUIフレームワークや決済ゲートウェイから分離することが考えられます。コアは、商品の管理、価格の計算、注文の処理を担当します。ドライビングアダプターには、商品カタログ、ショッピングカート、チェックアウトページのReactコンポーネントが含まれます。ドリブンアダプターには、さまざまな決済ゲートウェイ（例：Stripe、PayPal、Alipay）や配送業者（例：FedEx、DHL、UPS）のためのAPIクライアントが含まれます。これにより、プラットフォームはさまざまな地域の決済方法や配送オプションに容易に適応できます。</p>

<p><b>例2：多言語対応のソーシャルメディアアプリケーション</b></p>

<p>多言語対応のソーシャルメディアアプリケーションでは、クリーンアーキテクチャを使用して、コアとなるユーザー認証とコンテンツ管理ロジックをUIやローカリゼーションフレームワークから分離することができます。エンティティはユーザー、投稿、コメントを表します。ユースケースは、ユーザーがコンテンツを作成、共有、操作する方法を定義します。インターフェースアダプターは、コンテンツのさまざまな言語への翻訳や、異なるUIコンポーネント用のデータフォーマットを処理します。これにより、アプリケーションは新しい言語を簡単にサポートし、さまざまな文化的嗜好に適応できます。</p>

<h2>結論</h2>

<p>ヘキサゴナルアーキテクチャとクリーンアーキテクチャは、保守性、テスト性、拡張性の高いフロントエンドアプリケーションを構築するための貴重な原則を提供します。コアビジネスロジックを外部の依存関係から切り離すことで、時間の経過とともにより進化させやすい、柔軟で適応性の高いコードベースを作成できます。これらのアーキテクチャは初期にはある程度の複雑さを加えるかもしれませんが、保守性、テスト性、拡張性という点での長期的な利点は、複雑なフロントエンドプロジェクトにとって価値ある投資となります。単純なアーキテクチャから始め、必要に応じて徐々に複雑さを加えること、そして関連する実践的な考慮事項と課題を慎重に検討することを忘れないでください。</p>

<p>これらのアーキテクチャパターンを取り入れることで、フロントエンド開発者は、世界中のユーザーの進化するニーズに応えることができる、より堅牢で信頼性の高いアプリケーションを構築できます。</p>

<h3>参考文献</h3>

<ul>
  <li>Hexagonal Architecture: <a href="https://alistaircockburn.com/hexagonal-architecture/">https://alistaircockburn.com/hexagonal-architecture/</a></li>
  <li>Clean Architecture: <a href="https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html">https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html</a></li>
</ul>
</div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">フロントエンドアーキテクチャ</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ヘキサゴナルアーキテクチャ</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">クリーンアーキテクチャ</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">フロントエンド開発</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ソフトウェアアーキテクチャ</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">スケーラブルなアプリケーション</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">テスト可能なコード</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">保守可能なコード</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UIアーキテクチャ</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">JavaScriptアーキテクチャ</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">TypeScriptアーキテクチャ</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RC("B:1","S:1")</script></body></html>